<template>
  <div class="taskMDialog typeMapDia">
    <el-dialog title="数据元信息" :visible.sync="dialogVisible" width="550" class="single-task-dialog"
      :close-on-click-modal="false" append-to-body>
      <div class="title-gra plr30">
        <div class="grab gra-r">
          <span class="grab gra-l"></span>
        </div>
      </div>
      <div>
        <el-col :span="24" class="plr30" id="metaDataSearch">
          <el-form :model="ruleForm">
            <el-form-item label="主题分类:" prop="themeType">
              <SelectTree :data="themeOptions" :list="themeList" :defVal="ruleForm.themeType" @change="themeChange" />
            </el-form-item>
            <el-form-item label="中文名称:" prop="cnName">
              <el-input v-model="ruleForm.cnName"></el-input>
            </el-form-item>
            <el-form-item label="标识符:" prop="mark">
              <el-input v-model="ruleForm.mark"></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="getTable(1)" style="margin-bottom:22px;">查询</el-button>
        </el-col>
        <div>
          <el-table ref="table" :data="tableData" height="400" v-loading="loading" stripe>
            <el-table-column label width="55">
              <template scope="scope">
                 <el-checkbox-group v-model="checkList">
                     <el-checkbox :label="scope.row.zwmc" @change.native="getTemplateRow(scope.$index,scope.row)">&nbsp;</el-checkbox>
                 </el-checkbox-group>
              </template>
            </el-table-column> 
              <!-- <el-table-column type="selection" width="55">
              </el-table-column> -->
              <el-table-column prop="index" label="序号"></el-table-column>
              <el-table-column prop="ztName" label="主题分类" show-overflow-tooltip></el-table-column>
              <el-table-column prop="zwmc" label="中文名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="bsf" label="标识符" show-overflow-tooltip></el-table-column>
              <!-- <el-table-column prop="sjlx" label="数据类型" show-overflow-tooltip></el-table-column> -->
              <el-table-column prop="sm" label="说明" show-overflow-tooltip></el-table-column>
          </el-table>
          <el-pagination background layout="prev,pager,next" style="padding: 10px 0;text-align:right;"
            :page-size="pagination.pageSize" :current-page="pagination.currentPage" :total="pagination.total"
            @current-change="currentChange"></el-pagination>
        </div>
      </div>
      <div class="mr-btn clearfix">
        <el-button type="primary" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="emitData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import SelectTree from "@/components/SelectTree";
  import {
    getSubjects,
    getBfsInfo
  } from "@/api/roleApi.js";
  export default {
    name: "metaDataDialog",
    components: {
      SelectTree
    },
    data() {
      return {
        dialogVisible: false,
        loading: false,
        tableData: [],
        templateRadio: "",
        roleId: "",
        tmSelectInfo: [], //拖敏选中的值
        templateSelection: [],
        checkList:[],
        isSelect: false,
        ruleForm: {
          themeType: "",
          cnName: "",
          mark: ""
        },
        themeList: [],
        themeOptions: [],
        currentRow: [],
        pagination: {
          pageSize: 10,
          currentPage: 1,
          total: 10
        },
        defaultProps: {
          children: "children",
          label: "label"
        }
      };
    },
    mounted() {
      this.pagination.pageSize = this.$store.state.pageSize;
    },
    methods: {
      openDialog(roleId,tmSelectStr,tmSelectObjInfo) {
        this.checkList = tmSelectStr.split(";");
        this.checkList.pop();
        this.templateSelection = tmSelectObjInfo;
        this.ruleForm = {
          themeType: "",
          cnName: "",
          mark: ""
        };
        this.templateRadio = "";
        this.dialogVisible = true;
        // this.currentRow = row.row;
        this.roleId = roleId;
        this.getThemeOptions();
      },
      emitData() {
        let context = this;
        if (context.templateSelection) {
          context.dialogVisible = false;
          this.$emit("setMeta", context.templateSelection);
        }
      },
      changeThemeType() {
        this.tableData = null;
        this.getTable(1);
      },
      themeChange(data) {
        this.ruleForm.themeType = data;
        this.getTable(1);
      },
      async getThemeOptions() {
        this.tableData = [];
        // this.templateSelection = [];
        getSubjects().then(result => {
          if (result) {
            this.themeList = result;
            this.themeOptions = this.getTreeData(result);
            this.ruleForm.themeType = this.themeOptions[0];
          } else {

          }
        });

        // try {
        //   // const url = `${window.ENV.API_DACM}/caccess/selectZtdxApi`;
        //   const url = `http://10.19.248.200:31950/DACM/caccess/selectZtdxApi`;
        //   const result = await this.$ajax.get(url);
        //   if (!result.data.success) {
        //     throw result.data.message;
        //  }

        //   this.themeList=result.data.data;
        //   this.themeOptions = this.getTreeData(result.data.data);      
        //   this.ruleForm.themeType = this.themeOptions[0];
        // } catch (error) {
        //   console.log(error);
        //   this.themeOptions=[];
        // }
      },
      //过滤主题分类 列表中pcode 为00 的第一级菜单
      getTreeData(list) {
        const result = [];
        list = list.map(i => {
          return {
            id: i.code,
            label: i.name,
            code: i.code,
            pcode: i.pcode,
            children: []
          };
        });
        list.forEach(i => {
          const item = list.find(j => j.code === i.pcode);
          if (!item) {
            result.push(i);
          } else {
            item.children.push(i);
          }
        });
        return result.filter(val => val.pcode === '00');
      },
      getTable(val) {
        let context = this;
        if (val === 1) {
          context.pagination.currentPage = 1;
        }
        context.loading = true;
        let params = {
          ZTCODE: context.ruleForm.themeType.code,
          bsf: context.ruleForm.mark,
          zwmc: context.ruleForm.cnName
        };
        getBfsInfo(context.pagination.currentPage, context.pagination.pageSize, params).then(res => {
          if (res) {
            context.loading = false;
            context.pagination.currentPage = res.pageNum;
            context.pagination.total = res.total;
            context.tableData = [];
            res.list.map((d, i) => {
              context.tableData.push(d);
              context.tableData[i].index =
                (res.pageNum - 1) * context.pagination.pageSize +
                i +
                1;
              if (
                d.bsf == context.currentRow.newColumnName &&
                d.sjlx == context.currentRow.newColumnType &&
                d.sm == context.currentRow.orgColumnComment
              ) {
                context.templateRadio = i;
              }
            });
          } else {
            // context.$alert(res.data.message, "提示", {
            //   confirmButtonText: "确定",
            //   type: "error",
            //   callback: action => {}
            // });
          }
        });

        //   let url = `${window.ENV.API_DACM}/caccess/selectBSF/${
        //   context.pagination.currentPage
        // }/${context.pagination.pageSize}`;
        //   context.$ajax
        // .post(url, {
        //   ZTCODE: context.ruleForm.themeType.code,
        //   bsf: context.ruleForm.mark,
        //   zwmc: context.ruleForm.cnName
        // })
        // .then(res => {
        //   context.loading = false;
        //   if (res.data.success) {
        //     context.pagination.currentPage = res.data.data.pageNum;
        //     context.pagination.total = res.data.data.total;
        //     context.tableData = [];
        //     res.data.data.list.map((d, i) => {
        //       context.tableData.push(d);
        //       context.tableData[i].index =
        //         (res.data.data.pageNum - 1) * context.pagination.pageSize +
        //         i +
        //         1;
        //       if (
        //         d.bsf == context.currentRow.newColumnName &&
        //         d.sjlx == context.currentRow.newColumnType &&
        //         d.sm == context.currentRow.orgColumnComment
        //       ) {
        //         context.templateRadio = i;
        //       }
        //     });
        //   } else {
        //     context.$alert(res.data.message, "提示", {
        //       confirmButtonText: "确定",
        //       type: "error",
        //       callback: action => {}
        //     });
        //   }
        // });
      },
      getTemplateRow(index, row) {
        //获取选中数据
        // this.templateSelection = row;
        let length = this.templateSelection.length;
        let selectIndex = 0;
        for (let i = 0; i < length; i++) {
          if (this.templateSelection[i].zwmc === row.zwmc) {
            selectIndex++;
            if (i === 0) {
              this.templateSelection.shift(); //删除并返回数组的第一个元素
            } else if (i === length - 1) {
              this.templateSelection.pop(); //删除并返回数组的最后一个元素
            } else {
              this.templateSelection.splice(i, 1); //删除下标为i的元素
            }
          }
        }
        if (selectIndex === 0) {
          let tmObj = {};
          tmObj.bsf = row.bsf;
          tmObj.zwmc = row.zwmc;
          this.templateSelection.push(tmObj);
          // this.checkList.push(row.zwmc);
        } else {
          selectIndex = 0;
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      currentChange(val) {
        this.pagination.currentPage = val;
        this.getTable();
      }
    }
  };

</script>
<style lang="scss">
  @import "@/assets/css/base.scss";
  @import "@/assets/css/dialog.scss";

  #metaDataSearch {

    .el-form,
    .el-form-item,
    .el-form-item__content {
      display: inline-block;
    }

    .el-form-item {
      margin-right: 25px;
    }

    .el-input {
      width: 200px;
    }
  }

</style>
<style lang="scss" scoped>

</style>
